﻿
.b-dropdown {
    &.b-dropdown-group {
        > .b-button:not(:last-child):not(.b-dropdown-toggle) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        > .b-button + .b-button.b-dropdown-toggle {
            > .b-dropdown-toggle-arrow {
                margin-left: 0;
            }
        }
    }
}

.b-button-group:not(.b-button-group-vertical) {
    > .b-dropdown:first-child {
        > .b-dropdown-toggle {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    > .b-dropdown:last-child {
        > .b-dropdown-toggle {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    }
}

.b-dropdown {
    position: relative;

    &.b-dropdown-disabled.b-is-autocomplete {
        background-color: var(--b-theme-light, #f5f5f5);
    }

    .b-dropdown-toggle-arrow {
        transition: transform 200ms ease-out;
    }

    > .b-dropdown-toggle[aria-expanded="true"] {
        > svg.b-dropdown-toggle-arrow {
            transform: rotate(180deg);
        }
    }

    > .b-dropdown-menu > ul {
        > .b-dropdown.b-dropdown-submenu:not(.dropup, .dropleft, .dropright) {
            position: relative;

            > .b-dropdown-menu > ul {
                top: auto;
                left: auto;
                bottom: auto;
                right: auto;
            }
        }

        > .b-dropdown.b-dropdown-submenu.dropup, > .b-dropdown.b-dropdown-submenu.dropleft, > .b-dropdown.b-dropdown-submenu.dropright {
            .b-dropdown-toggle::after {
                position: absolute;
                right: 10%;
                top: 45%;
            }
        }
    }

    &.dropup {
        > .b-dropdown-toggle-submenu {
            &[aria-expanded="true"] {
                > svg.b-dropdown-toggle-arrow {
                    transform: rotate(0deg);
                }
            }

            &[aria-expanded="false"] {
                > svg.b-dropdown-toggle-arrow {
                    transform: rotate(180deg);
                }
            }
        }

        > .b-dropdown-menu > ul {
            top: auto;
            left: auto;
            bottom: 100%;
            margin-top: 0;
            margin-bottom: .125rem;
        }
    }

    &.dropright {
        > .b-dropdown-toggle-submenu {
            &[aria-expanded="true"] {
                > svg.b-dropdown-toggle-arrow {
                    transform: rotate(90deg);
                }
            }

            &[aria-expanded="false"] {
                > svg.b-dropdown-toggle-arrow {
                    transform: rotate(-90deg);
                }
            }
        }

        > .b-dropdown-menu > ul {
            top: 0%;
            right: auto;
            left: 100%;
            bottom: auto;
            margin-top: 0;
            margin-left: .125rem;
        }
    }

    &.dropleft {
        > .b-dropdown-toggle-submenu {
            &[aria-expanded="true"] {
                > svg.b-dropdown-toggle-arrow {
                    transform: rotate(-90deg);
                }
            }

            &[aria-expanded="false"] {
                > svg.b-dropdown-toggle-arrow {
                    transform: rotate(90deg);
                }
            }
        }

        > .b-dropdown-menu > ul {
            top: 0%;
            right: 100%;
            left: auto;
            bottom: auto;
            margin-top: 0;
            margin-right: .125rem;
        }
    }
}

.b-is-autocomplete {
    width: 100%;

    .b-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: var(--autocomplete-menu-max-height, 200px);
        overflow-y: scroll;
    }

    &.b-is-autocomplete-multipleselection {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        max-width: 100%;
        width: 100%;
        cursor: text;
        min-height: calc(1.5em + .75rem + 2px);
        height: auto;
        border: 1px solid var(--btw-color-gray-300);
        border-radius: 0.5rem;

        > input:not(.border-green-500, .border-red-500) {
            border: none;
        }

        > input {
            display: inline-block;
            box-shadow: none;
            outline: none;
            background-color: transparent;
            max-width: inherit;
            width: auto;
            flex-grow: 1;
        }

        > .b-badge {
            margin-top: 0.25rem;
            margin-bottom: 0.25rem;
            line-height: 1.5;
            flex-grow: initial;
        }

        .b-dropdown-menu {
            top: 100%;
        }

        &.focus {
            --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/ );
            --tw-ring-offset-width: 0px;
            --tw-ring-offset-color: #fff;
            --tw-ring-color: var(--btw-color-primary-500);
            --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
            --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
            border-color: var(--btw-color-primary-500);
            box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);
            outline: 2px solid transparent;
            outline-offset: 2px;
        }
    }
}
